<script lang="ts" setup>
// 引入 echarts
import { OrganizationUseInfo } from '@/assets/api/electricitydataanalysisservice_0_0_1';
import { fitChartSize } from '@/utils/flex-size-utrils';
import * as echarts from 'echarts';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
// 创建 dom 的对象
const chart = ref<HTMLDivElement>();

// chart 的对象实例
let myChart: echarts.ECharts | undefined;

const props = defineProps<{
    organization_use_datas: Array<OrganizationUseInfo>
}>();
const datas: {
    yaxis_data: Array<string>,
    series_data: Array<any>,
} = {
    yaxis_data: [],
    series_data: [],
}

watch(() => props.organization_use_datas, () => {
    datas.yaxis_data = []
    datas.series_data = []

    // 构建字符串
    for (let ele of props.organization_use_datas) {
        datas.yaxis_data.push(ele.organization);
        datas.series_data.push(ele.use / 100);
    }
    doRender();
});


const doRender = () => {
    let option = {
        grid: {
            left: '5%',
            right: '5%',
            top: '15%',
            bottom: '10%',
            containLabel: true
        },

        // 设置标题
        title: [
            {
                text: '学院用电量',
                textStyle: {
                    fontSize: fitChartSize(16), // 标题的文字大小
                    fontWeight: 'bold',
                    color: '#fff',
                }
            }
        ],

        // 配置 X 轴
        yAxis: {
            type: 'category',  // X 轴类型为类目轴，适合离散型数据
            axisLabel: {
                fontSize: fitChartSize(14), // 字体大小
                color: '#fff',
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false // 去掉x轴的刻度线
            },
            axisLine: {
                lineStyle: {
                    color: 'white' // X轴的颜色
                },
            },
            data: datas.yaxis_data
        },
        // 配置 Y 轴
        xAxis: {
            type: 'value',      // Y 轴类型为数值轴，适合连续型数据
            axisLabel: {
                fontSize: fitChartSize(14) // 字体大小
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false // 去掉x轴的刻度线
            },
            axisLine: {
                lineStyle: {
                    color: 'white' // X轴的颜色
                },
            },
        },

        // 配置系列数据
        series: [
            {
                name: "充值电量",
                data: datas.series_data,
                type: 'bar',    // 系列类型为柱状图
                barWidth: '40%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        { offset: 0, color: '#FFEB3B' },
                        { offset: 1, color: '#FF9800' }
                

        ])

    },
    animationEasing: 'elasticOut',
                animationDuration: 1500,
                // 添加 tooltip 配置
                tooltip: {
                    show: true,
                    trigger: 'item',  // 设置触发方式为 item，表示在鼠标悬停在具体项上时触发
                    formatter: '{b}<br>{c}kWh', // 格式化显示数据，b是类目（y轴的值），c是数据值
                    backgroundColor: 'rgba(0, 0, 0, 0.7)', // 背景色
                    borderColor: '#ccc', // 边框颜色
                    borderWidth: 1, // 边框宽度
                    padding: 10, // 内边距
                    textStyle: {
                        color: '#fff', // 文本颜色
                    },
                },
            }
        ],
        // 全局 tooltip 配置，提升体验
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            borderColor: '#ccc',
            borderWidth: 1,
            padding: 10,
            textStyle: {
                color: '#fff',
            },
        }
        };
    // 使用配置项生成图表
    const renderChart = () => {
    if (!myChart) return;
    myChart.setOption(getChartOptions());
};
}
// 
const onHandlerWindowResize = () => {
    if (!myChart) {
        return;
    }
    // 重新设置字体大小   
    doRender();
    // 调整大小
    myChart.resize();
};

// 组件加载完成后加载的对象
onMounted(() => {
    // 固定用法，需要使用 chart.value
    myChart = echarts.init(chart.value);
    // 渲染出来
    doRender();
    // 监听窗口大小变化的事件
    window.addEventListener('resize', onHandlerWindowResize);
});
onBeforeUnmount(() => {
    // 组件销售时,退出监听
    window.removeEventListener('resize', onHandlerWindowResize);
});

function getChartOptions(): any {
    throw new Error('Function not implemented.');
}
</script>

<template>
    <!-- ref 是一个 就是获取到 dom 对象 -->
    <div class="year-revenu-chart-wrapper">
        <div ref="chart" class="year-revenu-chart"></div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss/flex-layout.scss";

.year-revenu-chart-wrapper {
    width: 100%;
    height: 100%;
    background: transparent;
    padding: vw(10);

    .year-revenu-chart {
        width: 100%;
        height: 100%;
        padding: vw(10);
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }
}
</style>